<template>
  <div>
    <h1>插槽</h1>
    <MyDialog>
      <!-- 在两个标签之间值即可写的代码，是传递给插槽的结构 (传给组件中的slot) -->
      <!-- 如果要将结构传给某一个插槽标签,那么需要添加template标签 -->
      <!-- 然后在template上使用 v-slot 指令,  v-slot:slot标签的name属性 -->
      <template v-slot:title>
        <h2>添加图书</h2>
      </template>

      <template v-slot:content="obj">
        <form action="">
          书名: <input type="text" placeholder="输入书名" /> <br />
          作者:<input type="text" placeholder="输入作者" />
          子组件用插槽传递过来的值:{{ obj.uname }}
        </form>
      </template>
    </MyDialog>
    <!-- MyList组件现在就是一个复用的组件 -->
    <MyList :list="users">
      <template #default="obj">
        <button @click="del(obj.id)">删除</button>
      </template>
    </MyList>
    <MyList :list="goods">
      <template #default="obj">
        <button @click="del(obj.id)">删除</button>
        <button @click="edit(obj.id)">编辑</button>
      </template>
    </MyList>
  </div>
</template>

<script>
import MyDialog from "@/components/MyDialog.vue";
import MyList from "@/components/MyLits.vue";
export default {
  data() {
    return {
      users: [
        { id: 2, name: "张三" },
        { id: 4, name: "李四" },
        { id: 5, name: "王五" },
        { id: 6, name: "赵六" },
      ],

      goods: [
        { id: 4, name: "方便面" },
        { id: 6, name: "火腿肠" },
        { id: 7, name: "鸡爪子" },
      ],
    };
  },
  components: {
    MyDialog,
    MyList,
  },
  methods: {
    del(id) {
      console.log(id);
    },
    edit(id) {
      console.log("编辑" + id);
    },
  },
};
</script>

<style>
</style>